<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">订单评价</block>
		</cu-custom>
		<view class="padding">
			<view class="bg-white radius-xl box">
				<view class="top flex flex-wrap padding-sm">
					<view class="order-no basis-xl">
						{{ order.order_no }}
					</view>
					<view class="check basis-xs text-right" @click="setAnony()">
						<text :class="form.anony === 1 ?'cuIcon-roundcheckfill themeColor':'cuIcon-roundcheck'"></text>
						<text class="text-sm">是否匿名</text>
					</view>
				</view>

				<view class="partner padding-sm padding-top-0 solid-bottom">
					<view>
						<text class="cuIcon-titles themeColor"></text>
						您对客服的评价
					</view>
					<view class="info padding-sm" v-if="order.staff">
            <view class="cu-avatar sm round " :style="{backgroundImage: 'url('+order.staff.avatar+')'}"></view>
						<view class="padding-left-sm">
							<text>{{order.staff.nickname}}</text>
						</view>
					</view>
          <view class="rate padding-top-sm">
            <text class="text-sm">评分：</text>
            <u-rate :count="5" v-model="form.partnerRate"></u-rate>
          </view>
					<view class="tag flex flex-wrap">
						<view class="padding-xs" v-for="(item,index) in tags" :key="index">
							<view class='cu-tag radius'
								:class="item.isSelected==10?'bg-green light':''"
								@click="toSelectTags(index)">
									{{item.name}}
							</view>
						</view>
<!--						<view class="padding-xs">-->
<!--							<view class='cu-tag radius' :class="form.partnerWrite == true?'bg-green light':''" @click="toSetPartnerShow()">-->
<!--								<text class="cuIcon-write"></text>-->
<!--								<text>写评价</text>-->
<!--							</view>-->
<!--						</view>-->
					</view>
					<view class="content padding-sm bg-gray radius-lg margin-top-sm" >
						<textarea placeholder="请输入您对客服的评价内容" class="text-sm" v-model="form.partnerText"></textarea>
					</view>
				</view>

				<view class="project padding-sm">
					<view>
						<text class="cuIcon-titles themeColor"></text>
						您对服务项目的评价
					</view>
					<view class="info padding-sm" v-for="(item,index) in order.orderDetails" :key="index" v-if="order.orderDetails">
						<image :src="item.good.image" mode="" class="radius"></image>
						<view class="padding-left-sm">
							<text>{{item.good.name}}</text>
							<view class="time padding-top-sm text-gray text-sm">
								服务时长：{{item.good.duration}}分钟
							</view>
						</view>
					</view>
					<view class="rate padding-left-sm">
						<text>评分：</text>
            <u-rate :count="5" v-model="form.projectRate"></u-rate>
					</view>
					<view class="content padding-sm bg-gray radius-lg margin-top-sm">
						<textarea placeholder="请输入您对服务项目的评价内容" class="text-sm" v-model="form.projectText"></textarea>
					</view>
				</view>
			</view>

			<view class="submit margin-top-lg">
				<view class="flex flex-direction">
					<button class="cu-btn china-btn-bg lg round"  @click="submit()">确认提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					partnerRate:5,
					projectRate:5,
					partnerWrite:false,
					anony: 0,
					projectText:'',
					partnerText:''
				},
				order:{
          orderDetails: [],
        },
				tags:[]
			};
		},
		onLoad(options) {
      this.form.orderId = options.orderId;
      this.$http.getOrderDetail({
        id:options.orderId
      }).then(res=>{
        this.order = res
      })
		},
		methods:{
			orderInfo(orderId){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.get({
					url:'partner.Order/comment',
					data:{orderId:orderId},
					success:res=>{
						uni.hideLoading();
						this.order = res.data.orderInfo;
						this.tags = res.data.tags;
					}
				})
			},
			async submit(){
        uni.showLoading({
          title:'提交中'
        })
        await this.$http.createTechnicianComment({
          order_id: this.order.id,
          order_no: this.order.order_no,
          score:this.form.partnerRate,
          anony:this.form.anony,
          staff_id:this.order.staff.id,
          comment:this.form.partnerText,
          member_id:this.order.member_id,
        })
        for (let i = 0; i < this.order.orderDetails.length; i++) {
          const orderDetail = this.order.orderDetails[i]
          const project = orderDetail.good
          await this.$http.createProjectComment({
            order_id: this.order.id,
            order_no: this.order.order_no,
            score:this.form.projectRate,
            comment:this.form.projectText,
            anony:this.form.anony,
            project_id:project.id,
            member_id:this.order.member_id,
          })
        }
        uni.showToast({
          title:'提交成功',
          icon:'none'
        })
        setTimeout(()=>{
          uni.navigateBack()
        },1500)
			},
			toSelectTags(index){
				let status = this.tags[index].isSelected == 10 ? 20 : 10;
				this.tags[index].isSelected = status;
			},
			toSetPartnerShow(){
				let status = this.form.partnerWrite ? false : true;
				this.form.partnerWrite = status;
			},
			setAnony(){
				this.form.anony = this.form.anony === 1 ? 0 : 1;
			}
		}
	}
</script>

<style lang="less" scoped>
.box{
	.top{
		display: flex;
		align-content: center;
	}
	.partner{
		.info{
			display: flex;
			align-items: center;
			image{
				width: 100upx;
				height: 100upx;
			}
			.rate{
				flex: 1;
				display: flex;
			}
		}
		.content{
			textarea{
				height: 120upx;
				width: 100%;
			}
		}
	}

	.project{
		.info{
			display: flex;
			align-items: center;
			image{
				width: 100upx;
				height: 100upx;
			}
		}
		.rate{
			flex: 1;
			display: flex;
		}
		.content{
			textarea{
				height: 120upx;
				width: 100%;
			}
		}
	}
}
</style>
